import { memo, ReactElement, useMemo, useState } from "react";
import type { FC } from "react";
import { NavBarWrapper } from "@/styles/navbar";
import { AutoComplete, Badge, Input, message, Popover } from "antd";
import {
  AliyunOutlined,
  CaretDownOutlined,
  CaretUpOutlined,
  PhoneFilled,
  QqOutlined,
  SearchOutlined,
  ShoppingCartOutlined,
  WechatOutlined,
  WeiboSquareOutlined,
} from "@ant-design/icons";
import { useSelector } from "react-redux";
import { IAppRootState } from "../store";
import { filtrationConfigKey } from "../utils/filtration";

interface IProps {
  children?: ReactElement;
}

const NavBar: FC<IProps> = (props: IProps) => {
  const { navbar, counter } = useSelector((rootState: IAppRootState) => {
    return {
      navbar: rootState.home.navbar,
      counter: rootState.home.counter,
    };
  });
  //处理数据
  const options = filtrationConfigKey(navbar.configKey);
  let placeholder = navbar.defaultKey;

  // 登录的逻辑
  const [hasIcon, setHasIcon] = useState(false);

  function handleOpenChange() {
    setHasIcon(!hasIcon);
  }

  const text = () => {
    return (
      <div className="items">
        <div className="item">
          <PhoneFilled />
          <div className="info">手机号登录</div>
        </div>
        <div className="item">
          <WechatOutlined />
          <div className="info">微信登录</div>
        </div>
        <div className="item">
          <QqOutlined />
          <div className="info">QQ登录</div>
        </div>
        <div className="item">
          <WeiboSquareOutlined />
          <div className="info">新浪微博登录</div>
        </div>
        <div className="item">
          <AliyunOutlined />
          <div className="info">阿里云登录</div>
        </div>
      </div>
    );
  };

  function switchIcon() {
    if (!hasIcon) {
      return <CaretDownOutlined style={{ fontSize: "16px" }} />;
    } else {
      return <CaretUpOutlined style={{ fontSize: "16px" }} />;
    }
  }

  // 搜索事件处理
  function handleSearchChange(event: string) {
    console.log(event);
  }

  return (
    <NavBarWrapper>
      <div className="logo sprite"></div>
      <div className="right">
        <div>
          <AutoComplete
            options={options}
            style={{ width: "300px" }}
            onChange={(e) => handleSearchChange(e)}
          >
            <Input
              size="large"
              placeholder={placeholder}
              prefix={<SearchOutlined />}
            />
          </AutoComplete>
        </div>
        <div className="shopCart">
          <Badge count={counter}>
            <ShoppingCartOutlined style={{ fontSize: "40px" }} />
          </Badge>
        </div>
        <div className="login">
          <Popover
            placement="bottom"
            content={text}
            trigger="hover"
            onOpenChange={handleOpenChange}
          >
            <div className="register">
              <div className="text">登录</div>
              {switchIcon()}
            </div>
          </Popover>
        </div>
      </div>
    </NavBarWrapper>
  );
};

export default memo(NavBar);
